<template>
    <span v-bind="$attrs">
      {{ screenNum }}
    </span>
  </template>
  
  <script>
  export default {
    props: {
      value: Number,
      animation_time: {
        type: Number,
        default: 2,
      },
    },
    name: 'ChangeNum',
    data() {
      return {
        screenNum: this.value,
      }
    },
    methods:{
      async sleep(millisecond) {
        return new Promise(function (reslove){
          setTimeout(reslove, millisecond)
        })
      }
    },
    watch: {
      async value(newVal, oldVal) {
        const totalTime = this.animation_time * 1000
        const times = 20 //数字变化次数
        const intervalTime = totalTime/times
        // 每次变化差值
        const distance = Math.floor(( newVal - oldVal ) / times)
        for (let index = 0; index < times; index++) {
          this.screenNum += distance
          await this.sleep(intervalTime)
        }
        this.screenNum = newVal
      },
    },
  }
  </script>